<template>
  <div v-loading="loading" style="padding: 10px 20px;">
    <div v-if="canEdit" style="display: flex; justify-content: flex-end; padding-right: 20px">
      <el-button type="primary" size="mini"> 跟进记录 </el-button>
    </div>
    <div style="display: flex;justify-content: space-between;width: 280px;margin-bottom: 20px;">
      <el-select v-model="user_id" clearable placeholder="请选择外勤：">
        <el-option v-for="item in officialList" :key="item.id" :label="item.realname" :value="item.id" />
      </el-select>
      <el-button type="primary" @click.native="onSure()">
        确定
      </el-button>
    </div>

    <el-table :data="list" align="center" header-align="center" stripe style="width: 100%; border: 1px solid #e6e6e6"
      :header-cell-style="headerRowStyle" :cell-style="cellStyle">
      <el-table-column v-for="(item, index) in fieldList" :key="index" show-overflow-tooltip :prop="item.prop"
        :label="item.label">
      </el-table-column>
      <!-- <el-table-column label="操作" width="150">
        <template slot-scope="scope">
          <flexbox justify="center">
            <el-button type="text" @click.native="handleFile('preview', scope)">
              预览
            </el-button>
            <el-button v-if="canEdit" type="text" @click.native="handleFile('edit', scope)">
              重命名
            </el-button>
            <el-button v-if="canEdit" type="text" @click.native="handleFile('delete', scope)">
              删除
            </el-button>
          </flexbox>
        </template>
      </el-table-column> -->
    </el-table>
    <!-- <div v-empty="list.length === 0">
      <div class="log-items">
        <examine-cell v-for="(item, index) in list" :key="index" :data="item.dataInfo" :canEdit="canEdit"
          @on-handle="examineCellHandle" />
        <div class="load">
          <el-button type="text" :loading="loadMoreLoading">
            {{ loadMoreLoading ? "加载更多" : "没有更多了" }}
          </el-button>
        </div>
      </div>
    </div>
    <examine-handle :show="showExamineHandle" @close="showExamineHandle = false" @save="refreshList" :id="rowID"
      examineType="oa_examine" status="2" />
    <examine-create-view v-if="isCreate" :category_id="createInfo.category_id" :category_title="createInfo.title"
      :action="createAction" @save-success="refreshList" @hiden-view="isCreate = false" />
    <c-r-m-full-screen-detail :visible.sync="showFullDetail" :crmType="detailCRMType" :id="rowID" /> -->
  </div>
</template>

<script>
  import ExamineCell from "@/views/OAManagement/examine/components/examineCell"; // 跟进记录
  import ExamineCreateView from "@/views/OAManagement/examine/components/examineCreateView";
  import {
    crmRecordIndex
  } from "@/api/customermanagement/common";
  import {
    personnelFlowlist,
    personnelGetpersonnel
  } from "@/api/common";

  export default {
    /** 审批 跟进记录*/
    name: "examine-log",
    components: {
      ExamineCell,
      CRMFullScreenDetail: () =>
        import("@/views/customermanagement/components/CRMFullScreenDetail.vue"),
      ExamineHandle: () => import("@/components/Examine/ExamineHandle"),
      ExamineCreateView,
    },
    props: {
      /** 模块ID */
      id: [String, Number],
      detail: {
        type: Object,
        default: () => {}
      },
      /** 没有值就是全部类型 有值就是当个类型 */
      crmType: {
        type: String,
        default: "",
      },
      /** 是公海 默认是客户 */
      isSeas: {
        type: Boolean,
        default: false,
      },
      // 刷新
      refresh: {
        type: [String, Number, Boolean],
        default: 0,
      },
      // 是否可编辑
      canEdit: {
        type: Boolean,
        default: false,
      },
    },
    watch: {
      id(val) {
        this.refreshList();
      },
      refresh(v) {
        this.refreshList();
      },
      detail: {
        handler(val) {
          this.contract_id = val.contract_id
        },
        deep: true,
        immediate: true
      },
    },
    data() {
      return {
        tableHeight: "400px",
        fieldList: [],
        officialList: [],
        loading: false,
        loadMoreLoading: true,
        isPost: false,
        page: 1,
        list: [], // 跟进记录列表
        rowID: "", // 行信息
        // 撤回操作
        showExamineHandle: false,
        isCreate: false, //是编辑
        createAction: {
          type: "save"
        },
        createInfo: {}, // 编辑所需要的id 标题名信息
        // 详情
        showFullDetail: false,
        detailCRMType: "",
        contract_id: '',
        user_id: ''
      };
    },
    computed: {},
    mounted() {
      this.fieldList.push({
        prop: "admin_realname",
        width: "200",
        label: "姓名"
      });
      this.fieldList.push({
        prop: "remark",
        width: "200",
        label: "备注",
      });
      this.fieldList.push({
        prop: "createtime",
        width: "200",
        label: "创建时间",
      });

      // 分批次加载
      //   let self = this;
      //   let item = document.getElementById("follow-log-content");
      //   item.onscroll = function () {
      //     let scrollTop = item.scrollTop;
      //     let windowHeight = item.clientHeight;
      //     let scrollHeight = item.scrollHeight; //滚动条到底部的条件

      //     if (scrollTop + windowHeight == scrollHeight && self.loadMoreLoading == true) {
      //       if (!self.isPost) {
      //         self.isPost = true;
      //         self.page++;
      //         self.getList();
      //       } else {
      //         self.loadMoreLoading = false;
      //       }
      //     }
      //   };

      this.getList();
      this.getPerson()
    },
    activated: function () {},
    deactivated: function () {},
    methods: {
      /** 通过回调控制表头style */
      headerRowStyle({
        row,
        column,
        rowIndex,
        columnIndex
      }) {
        return {
          textAlign: "center"
        };
      },
      /** 通过回调控制style */
      cellStyle({
        row,
        column,
        rowIndex,
        columnIndex
      }) {
        return {
          textAlign: "center"
        };
      },
      getPerson() {
        personnelGetpersonnel({
            contract_id: this.contract_id,
          })
          .then((res) => {
            this.officialList = res.data;

            if (res.data.list.length < 10) {
              this.loadMoreLoading = false;
            } else {
              this.loadMoreLoading = true;
            }
            this.loading = false;
            this.isPost = false;
          })
          .catch(() => {
            this.isPost = false;
            this.loading = false;
          });
      },
      onSure() {
        this.list = []
        this.getList()
      },
      getList() {
        personnelFlowlist({
            contract_id: this.contract_id,
            user_id: this.user_id
          })
          .then((res) => {
            this.list = this.list.concat(res.data.list);
          })
          .catch(() => {});
      },
      refreshList() {
        this.page = 1;
        this.list = [];
        this.getList();
      },
    },
  };

</script>

<style lang="scss" scoped>
  .log-items {
    min-height: 400px;
    position: relative;
    padding: 10px 20px;
  }

  .load {
    color: #999;
    font-size: 13px;
    margin: 0 auto 15px;
    text-align: center;

    .el-button,
    .el-button:focus {
      color: #ccc;
      cursor: auto;
    }
  }

</style>
